<template>
  <view class="list-bg">
    <image class="w-full h-full" src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/index-bg.png"></image>
  </view>
  <view ref="myListRef" class="my-list safety-24" :style="{ top: user.userInfo.serviceProviderFlag === 1 ? sTop : top }">
    <!--pt-72rpx 有消息模块不用加-->
    <view class="px-32rpx">
      <customHead :title="title" bg-color="#eaeff5" class="px-32rpx"></customHead>
    </view>
    <view>
      <view v-if="user.userInfo.pointFlag !== 1" class="my-list-top px-32rpx">
        <!--服务商卡片 渠道商展示-->
        <channel-merchant-card v-if="user.userInfo.serviceProviderFlag === 0" :user-info="user.userInfo"></channel-merchant-card>
      </view>
      <view class="my-list-content">
        <!--功能模块-->
        <view class="modular">
          <custom-modular v-for="item in dynamicMenu(user.userInfo)" :key="item.key" :title="item.title" :permission="item.permission">
            <template #content>
              <custom-item v-for="subItem in item[item.key]" :key="subItem.key" :list="subItem" @click="handleClickMenu(subItem)"></custom-item>
            </template>
            <template #right>
              <view v-if="item.key === 'commission'" class="flex flex-justify-around flex-items-center" @click="handleCommissionRules">
                <uv-icon
                  class="pr-8rpx pt-1rpx"
                  name="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-warning-white.svg"
                  color="#ffffff"
                  size="16"
                ></uv-icon>
                <text class="text-#727687 text-24rpx">佣金规则</text>
              </view>
            </template>
          </custom-modular>
        </view>
      </view>
    </view>
    <!--佣金规则-->
    <commission-rule-modal-box ref="commissionRulesRef"></commission-rule-modal-box>
  </view>
  <mt-tabbar :current="4"></mt-tabbar>
</template>

<script setup>
import customHead from '@/pages/index/components/custom-head.vue';
import customModular from '@/pages/my/components/custom-modular.vue';
import customItem from '@/pages/my/components/custom-item.vue';
import membershipCard from '@/pages/my/components/membership-card.vue';
import channelMerchantCard from '@/pages/my/components/channel-merchant-card.vue';
import { dynamicMenu } from '@/pages/my/menuList.js';
import commissionRuleModalBox from '@/pages/index/components/commission-rule-modal-box.vue';

import userStore from '@/store/user';
import { onLoad } from '@dcloudio/uni-app';
const user = userStore();

const title = ref('');

const top = ref('322rpx');
const sTop = ref('382rpx');
const tHeight = ref(500);
const sHeight = ref(460);

// 顶部盒子dom
const myListRef = ref(null);
// 佣金规则dom
const commissionRulesRef = ref(null);

// 会员中心
const handleMemberCenter = () => {
  // 类型为0是会员中心
  uni.navigateTo({
    url: '/subMember/pages/memberCenter?type=0'
  });
};

// 金牌渠道
const handleGoldChannel = () => {
  // 类型为1是金牌渠道
  uni.navigateTo({
    url: '/subMember/pages/memberCenter?type=1'
  });
};

const handleClickMenu = (item) => {
  if (item.key === 'invitationCode') {
    uni.navigateTo({
      url: `${item.url}?inviteCode=${user.userInfo.inviteCode}`
    });
  } else {
    uni.navigateTo({
      url: item.url
    });
  }
};

// 佣金规则
const handleCommissionRules = () => {
  commissionRulesRef.value.handleCommissionRules();
};

onLoad(() => {
  const systemInfo = uni.getSystemInfoSync();
  console.log(systemInfo.platform);
  if (systemInfo.platform === 'ios') {
    top.value = '332rpx';
    sTop.value = '392rpx';
    tHeight.value = 520;
    sHeight.value = 480;
  } else {
    top.value = '292rpx';
    sTop.value = '352rpx';
    tHeight.value = 470;
    sHeight.value = 410;
  }
});
</script>

<style lang="scss" scoped>
.list-bg {
  height: 620rpx;
  position: fixed;
  right: 0;
  top: 0;
  left: 0;
  z-index: 1;
}
.my-list {
  position: relative;
  z-index: 1;

  .my-list-content {
    padding: 0 32rpx 132rpx;

    .modular {
      // padding: 14rpx 0 0;
    }
  }
}

.close {
  position: absolute;
  right: 136rpx;
}
</style>
